<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>COC跑团骰娘</title>
    <style>
        .btn1 {
            background-color: brown;
            color: white;
            border-radius: 6px;
            height: 48px;
            min-width: 64px;
            margin: 12px;
        }

        .title {
            text-align: center;
            width: 100%;
        }

        .subtitle {
            color: #aaa;
            text-align: center;
            width: 100%;
            font-size: 4em;
            margin-top: 10px;
        }

        .size1 {
            font-size: 5em;
        }

        .size2 {
            font-size: 3em;
        }

        .size3 {
            font-size: 1.5em;
            margin-bottom: 20px;
        }

        @keyframes movescore {
            0% {left: 0px; top: 95px; font-size: 5em;}
            100% {left: 0px; top: 201px; font-size: 1.5em;}
        }
    </style>
</head>

<body>
    <div id="subtitle" class="subtitle">--</div>
    <div id="title1" class="size1 title">00</div>
    <div id="title2" class="size3 title">--</div>
    <div id="buttons" class="buttons"></div>
</body>
<script>

    // 获取地址栏参数
    function getQueryString(name) {
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURIComponent(r[2]);
        };
        return null;
    }

    // 获取 (Start, End) 包括End的数字。
    function getRandomInt(Start, End) {
        return Math.floor(Start + Math.random() * (parseInt(End) - parseInt(Start) + 1))
    }

    // 处理r_d_格式
    function getRnD(text) {
        let re = /[rR]?(\d+)[dD](\d+)/
        let m = text.match(re)
        if (m && m.length >= 3) {
            return { r: m[1], d: m[2] }
        }
        return { r: 1, d: 100 }
    }

    // 摇号
    function roll(text) {
        let ret = ['00']
        let rd = getRnD(text)
        for (let r = 0; r < rd.r; r++) {
            ret[r] = getRandomInt(1, rd.d).toString().padStart(2, '0')
        }
        return ret.join('-')
    }

    // 从元素1移动到元素2的动画
    async function animation(from, to) {
        return new Promise((resolve, reject) => {
            let node = from.cloneNode(true)
            node.removeAttribute('id')
            node.style.cssText = `position: absolute; left: 0;`
            node.animate([
                {fontSize: '5em', top: `${from.offsetTop}px`},
                {fontSize: '1.5em', top: `${to.offsetTop}px`}
            ], {
                duration: 500,
                iterations: 1,
                easing: 'ease'
            }).onfinish = () => {
                node.remove()
                resolve()
            }
            document.body.appendChild(node)
        })
    }

    // 点击一种
    function clickBtn(e) {
        let text = e.target.innerText
        console.log('click', text)
        subtitle.innerText = text
        animation(title1, title2).then(()=>{
            title2.innerText = title1.innerText
            title1.innerText = roll(text)
        })
    }

    // 骰娘列表
    let btnList =
        ['1d3', '1d4', '1d6', '1d8', '1d10', '1d100',
            '2d3', '2d4', '2d6', '2d8', '2d10', '2d100']

    // 如果地址栏上有，就按定制的来
    let urlR = getQueryString('rolls')
    if (urlR) {
        btnList = urlR.split(',')
    }

    // 生成按钮
    btnList.forEach(btnTitle => {
        let btn = document.createElement('button')
        btn.innerText = btnTitle
        btn.className = 'btn1'
        btn.onclick = clickBtn
        buttons.appendChild(btn)
    })

</script>

</html>